<template>
  <div class="progress-bar" @click="onClick">
    <!-- 黑色背景条 -->
    <div class="bar-inner">
      <!-- 黄色播放进度条 -->
      <!-- 测试{{ offset}} -->
      <div class="progress" :style="progressStyle" ref="progress"></div>
      <!-- button 拖动事件-->
      <div class="progress-btn-wrapper" :style="btnStyle"  @touchstart.prevent="onTouchStart"
        @touchmove.prevent="onTouchMove"
        @touchend.prevent="onTouchEnd">
        <div class="progress-btn"></div>
      </div>
    </div>
  </div>
</template>
<script>
const progressBtnWidth = 16 // 按钮的宽度
export default {
  name: 'progress-bar',
  props: {
    progress: { // 播放进度
      type: Number,
      default: 0
    }
  },
  emits: ['progress-changing', 'progress-changed'],
  data() {
    return {
      offset: 0 // 偏移量
    }
  },
  created() {
    this.touch = {}
  },
  methods: {
    onTouchStart(e) { //
     this.touch.x1 = e.touches[0].pageX // 开始横坐标的值 e.touches[0].pageX获取横坐标
     this.touch.beginWidth = this.$refs.progress.clientWidth // 进度条的宽度
    },
    onTouchMove(e) { // 偏移了多少
      console.log(e.touches[0].pageX)
      const delta = e.touches[0].pageX - this.touch.x1 // 获取到偏移多少
      const tempWidth = this.touch.beginWidth + delta // 位移过后的进度条的宽度
      const barWidth = this.$el.clientWidth - progressBtnWidth// 刚开始进度条的宽度
      const progress = Math.min(1, Math.max(tempWidth / barWidth, 0))// 位移过的宽度/ 刚开始的进度条宽度
      this.offset = barWidth * progress // 最初的进度条宽度*偏移后的进度条宽度 拿到偏移位置
      this.$emit('progress-changing', progress)// 滑动过程发送给上级组件
      console.log(progress)
    },
    onTouchEnd() { // 拖动手指离开触发的事件
       const barWidth = this.$el.clientWidth - progressBtnWidth// 刚开始进度条的宽度
       const progress = this.$refs.progress.clientWidth / barWidth
       this.$emit('progress-changed', progress)// 滑动结束发送给上级组件
    },
    onClick(e) { // 点击进度条改变歌曲进度
      const rect = this.$el.getBoundingClientRect() // 获取进度条
      const offsetWidth = e.pageX - rect.left // 得到点击位置到进度条开始的偏移量
      console.log(e.pageX, '点击的位置减去-----' + rect.left, '进度条到以外的宽度--得到黄色进度条宽度位置==' + offsetWidth)
      const barWidth = this.$el.clientWidth - progressBtnWidth
      const progress = offsetWidth / barWidth
      this.$emit('progress-changed', progress)
    },
    setOffset(progress) {
       const barWidth = this.$el.clientWidth - progressBtnWidth // 得到进度条的宽度
      this.offset = barWidth * progress
    }
  },
  computed: {
    progressStyle() {
      return `width:${this.offset}px`
    },
    btnStyle() {
      return `transform:translate3d(${this.offset}px,0,0)` // 位移btn按钮
    }
  },
  watch: {
    progress(newProgress) { // 监听歌曲进度变化 得到偏移量 this.$el.clientWidth得到当前组件的宽度
     this.setOffset(newProgress)
    }
  }
}
</script>

<style lang="scss" scoped>
  .progress-bar {
    height: 30px;
    .bar-inner {
      position: relative;
      top: 13px;
      height: 4px;
      background: rgba(0, 0, 0, 0.3);
      .progress {
        position: absolute;
        height: 100%;
        background: $color-theme;
      }
      .progress-btn-wrapper {
        position: absolute;
        left: -8px;
        top: -13px;
        width: 30px;
        height: 30px;
        .progress-btn {
          position: relative;
          top: 7px;
          left: 7px;
          box-sizing: border-box;
          width: 16px;
          height: 16px;
          border: 3px solid $color-text;
          border-radius: 50%;
          background: $color-theme;
        }
      }
    }
  }
</style>
